<template>
    <!-- 修改密码页面 -->
    <BaseLyaout class="container" :style="{ height: pageHeight + 'px' }">
        <template #header></template>

        <template #main>
            <el-row justify="center">
                <!--1--><el-col :span="12" class="form_box">
                    <el-form class="el-form" :model="changeFrom" label-width="auto">
                        <el-col :span="24" class="title">修改密码</el-col>

                        <el-form-item label="邮箱" style="margin-top: 25px;">
                            <el-input v-model="changeFrom.email" style="width: 75%;" type="text" autocomplete="off"
                                placeholder="请输入账号邮箱" size="large" />
                            <el-button style="margin-left: 10px;" @click="onGetVerifyCode()">获取验证码</el-button>

                        </el-form-item>
                        <el-form-item label="验证码" style="margin-top: 25px;">
                            <el-input v-model="changeFrom.verifyCode" style="width: 50%;" type="number"
                                autocomplete="off" placeholder="请输人验证码" size="large" />
                        </el-form-item>

                        <el-form-item label="新密码" style="margin-top: 25px;">
                            <el-input v-model="changeFrom.password" type="password" autocomplete="off"
                                placeholder="请输入新密码" size="large" />
                        </el-form-item>

                        <el-row justify="center" style="margin-top: 25px;">
                            <el-col :span="4.5">
                                <el-button size="large" type="warning" @click="onChange()"
                                    class="el-button">提交</el-button>
                            </el-col>
                            <el-col :span="5"></el-col>
                            <el-col :span="4.5">
                                <el-button size="large" type="primary" @click="back()" class="el-button">返回</el-button>
                            </el-col>
                        </el-row>

                    </el-form>
                    <!--1--></el-col>
            </el-row>
        </template>

        <template #footer></template>
    </BaseLyaout>
</template>
<script setup>
import { reactive, ref } from 'vue';
import BaseLyaout from "@/components/BaseLyaout.vue"
import { useRouter } from 'vue-router';
import userMsgInfoStore from '../../stores/useUserStore';
import { openInfo } from '../../utils/common';
import userHttp from '../../api/userHttp';
const store = userMsgInfoStore() //store仓库
const router = useRouter()
const pageHeight = ref(window.innerHeight);//获取页面高度
//修改密码表单
const changeFrom = reactive({
    email: "",
    verifyCode: null,
    password: "", //新密码
    codeType:"change", //验证码类型
})

//修改密码表单
function onChange() {
    if (changeFrom.email == "" || changeFrom.password == "" || changeFrom.verifyCode == null) {
        openInfo("", "请输入完整表单信息!")
    } else {
        userHttp.updatePassword(changeFrom).then((res) => {//提交表单
            if (res.code == 200) {
                openInfo("", "修改成功！")
                router.back() //跳转上一级页面
            }else{
                openInfo("","请输入正确验证码")
            }
        })
    }
}

//获取验证码
function onGetVerifyCode() {
    if (changeFrom.email == "") {
        openInfo("", "未输入邮箱！")
    } else {
        userHttp.getVerifyCode(changeFrom.email,changeFrom.codeType).then((res) => {
            openInfo("", res.msg)
        })
    }
}

//点击跳转登录页面
function back() {
    router.back()
}
</script>

<style scoped>
.container {
    height: 790px;
    width: 100%;
    background-image: url('@/assets/image/change_bg.png');
    background-repeat: no-repeat;
    /*不平铺*/
    background-size: cover;
    /*填满容器,多余的图片截掉 */
    background-attachment: fixed;
}

.form_box {
    width: 60%;
    height: 500px;
    border: 2px rgb(233, 171, 171) solid;
    border-radius: 20px;
}

.title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 30px;
    font-family: '宋体';
    color: rgb(26, 214, 180);
}

.el-form {
    max-width: 80%;
    margin-top: 30px;
    margin-left: 50px;
}

.el-button {
    border-radius: 10px;
    background: transparent;
    color: rgb(44, 207, 191);
}
</style>